<!--引入公共的模板-->
{{extend './layout.html'}}
{{block 'content'}}
<div class="container">
    <h3 class="mt-5">用户设置</h3>
    <!--    
        enctype 的三个属性值
        
        1.application/x-www-form-urlencoded 默认值，上传用户名和密码 QueryString name=zhang&age=18
        2.multipart/form-data  上传文件,转换成二进制才能上传
        3.text/plain：上传纯文本  传输，空格转换成+，但不将non-ASCII字符编码为%ASCII HEX. 现在主要应用于发送json数据到服务端
    -->

    <form class="mt-5 mb-3" action="/upload" method="post" enctype="multipart/form-data">
        <!-- 隐藏的表单input -->
        <input type="hidden" name="hiddenUsername" value="{{ username }}"/>
        <div class="mb-3">
            <label for="file" class="form-label" id="img">修改头像 : <img src="img/user.png" alt="user"> 上传头像 : </label>
            <input type="file" class="form-control" name="avatar" id="file"/>
        </div>
        <div class="mb-3">
            <label for="nickname" class="form-label" id="showNickname">修改昵称 </label>
            <input type="text" class="form-control"  placeholder="新昵称" id="nickname" name="nickname"/>
        </div>
        <div class="mb-3">
            <label for="oldPassword" class="form-label">修改密码</label>
            <input type="text" class="form-control"  placeholder="旧密码" id="oldPassword" name="oldPassword"/>
            <input type="text" class="form-control"  placeholder="新密码" id="newPassword" name="newPassword"/>
        </div>
        <div class="mb-3">
            <input type="submit" class="form-control btn-primary" id="dr" value="提交" >
        </div>
    </form>
</div>

<script>
    // 实现上传图片,在本地展示上传图片缩略图    
    // js 有2个API  1.FileReader  2.URL

    const file = document.getElementById('file');
    const img = new Image();
    file.onchange = function(){
        //1.FileReader

        // var reader = new FileReader();
        // reader.readAsDataURL(this.files[0]);
        // reader.onload = function(){
        //     var path = this.result;
        //     var img = new Image();
        //     img.width = 32;
        //     img.height = 32;
        //     img.src = path;
        //     document.getElementById('img').appendChild(img);                
        // }
        // reader.onerror = function(){
        //     console.log('读取失败');
        //     console.log(reader.error);
        // }

        // 2.URL

        // // console.log(121212);
        // // console.log(this.files); 
        // // console.log(this.files[0]);     // FileList
        // {
        //     lastModified: 1651933164881
        //     lastModifiedDate: Sat May 07 2022 22:19:24 GMT+0800 (中国标准时间) {}
        //     name: "allviphrefrtgif.gif"
        //     size: 122590
        //     type: "image/gif"
        //     webkitRelativePath: 
        // }
        
        // 上传文件验证
        const fileName = this.files[0].name.toLowerCase();
        const fileSize = this.files[0].size;
        const name = fileName.substr(fileName.lastIndexOf('.')+1,fileName.length);
        console.log(name);
        //判断文件类型
        if (!/(gif|jpg|jpeg|png|bmp|webp)$/.test(name) || fileSize >= 1048576 ) {
            alert("图片类型必须是.gif,jpeg,jpg,png,bmp,webp中的一种,且图片大小不能大于1M！");
            return;
        }

        const path = window.URL.createObjectURL(this.files[0]);
        img.width = 32;
        img.height = 32;
        img.src = path;
        document.getElementById('img').appendChild(img);
    } 
</script>
{{/block}}

